import React, {Component} from 'react'
import {connect} from 'react-redux'
import MusicItem from './music-item.jsx'

const TabItem = ({id, list, i, play, pause, selectMusic, selected, curSrc}) => {
    return (
        <div className={"am-tab-panel" + (i == 0 ? ' am-active' : '')} id={id}>
            <ul>
                {list.map(t => <MusicItem {...t}
                    curSrc={curSrc}
                    key={t.id}
                    play={play.bind(t, t.src)}
                    pause={pause}
                    select={selectMusic.bind(t, t)}
                    selected={selected}
                />)}
            </ul>
        </div>
    )
}

const MusicRec = props => { 
    return (
        <div className="am-tabs" id="rec-music-tab" data-am-tabs="">
            <ul className="normal-music-sort am-tabs-nav am-nav am-nav-tabs">
                {
                    props.list.map((t, i) => <li className={i == 0 ? ' am-active' : ''} key={t.id}><a href={`#rec-music-${t.id}`}>{t.name}</a></li>)
                }
            </ul>
            <div className="vip-music-wp normal-user-music am-tabs-bd">
                {
                    props.list.map((t, i) => <TabItem
                        i={i}
                        key={t.id}
                        id={`rec-music-${t.id}`}
                        {...props}
                        list={t.list}
                    />)
                }
            </div>
        </div>
    )
}

export default connect(
    ({music}) => ({
        list: music.rec.list,
        curSrc: music.curSrc,
    })
    , (dispatch, props) => ({
    })
)(MusicRec)